import { useState } from 'react';
import { Avatar } from '@/components/ui/Avatar';
import { IconButton } from '@/components/ui/Button';
import { Tooltip } from '@/components/ui/Tooltip';
import { PanelLeft } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * 用户头像区域组件
 * 支持头像展示、收起/展开切换，以及不同状态下的按钮显示
 */
interface UserAvatarsProps {
    isCollapsed: boolean;
    isHovered: boolean;
    onToggleCollapsed: () => void;
}

// 公共切换按钮组件
const ToggleButton = ({
    isExpand,
    onClick,
    className
}: {
    isExpand: boolean;
    onClick: () => void;
    className?: string;
}) => (
    <Tooltip content={isExpand ? "展开" : "收起"} side="right">
        <IconButton
            variant="ghost"
            size="sm"
            onClick={onClick}
            className={cn(
                'w-8 h-8 text-gray-500 hover:text-gray-700 hover:bg-gray-100',
                'transition-all duration-200 flex-shrink-0 z-10',
                isExpand ? 'cursor-e-resize' : 'cursor-w-resize',
                className
            )}
            icon={<PanelLeft className="w-5 h-5 flex-shrink-0" />}
            aria-label={isExpand ? "展开" : "收起"}
        />
    </Tooltip>
);

export const UserAvatars = ({
    isCollapsed,
    isHovered,
    onToggleCollapsed
}: UserAvatarsProps) => {
    const [isAvatarHovered, setIsAvatarHovered] = useState(false);

    const isCollapsedOnly = isCollapsed && !isHovered;
    const showContent = !isCollapsedOnly;

    return (
        <div className={cn(
            'flex items-center py-5 border-b border-gray-200 mb-5 px-4 relative flex-shrink-0',
            isCollapsed && 'overflow-hidden justify-start'
        )}>
            {/* 头像区域 */}
            <div
                className="relative flex items-center justify-center"
                onMouseEnter={() => isCollapsedOnly && setIsAvatarHovered(true)}
                onMouseLeave={() => setIsAvatarHovered(false)}
            >
                <Avatar className={cn(
                    'bg-blue-800 text-white flex-shrink-0',
                    isCollapsedOnly && isAvatarHovered && 'opacity-30'
                )}>
                    WO
                </Avatar>

                {/* 头像悬浮时的覆盖按钮 */}
                {isCollapsedOnly && isAvatarHovered && (
                    <ToggleButton
                        isExpand={true}
                        onClick={onToggleCollapsed}
                        className="absolute top-0 left-0 text-gray-600 hover:text-gray-800"
                    />
                )}
            </div>

            {/* 用户名 */}
            <div className={cn(
                "ml-3 flex-1 min-w-0 transition-opacity duration-300 ease-in-out",
                !showContent && 'opacity-0 pointer-events-none'
            )}>
                <div className="text-sm font-medium text-gray-900 truncate">
                    WorkSpace Owner
                </div>
            </div>

            {/* 右侧切换按钮 */}
            <div className={cn(
                'ml-auto flex items-center transition-opacity duration-300 ease-in-out',
                !showContent && 'opacity-0 pointer-events-none'
            )}>
                <ToggleButton
                    isExpand={isCollapsed && isHovered}
                    onClick={onToggleCollapsed}
                />
            </div>
        </div>
    );
};
